<template>
    <div class="search">
        <AppHeader to=".app-header" class="HomeNav SearchNav" left-arrow right-text="22222" back>
            <template #title>
                <van-search autofocus v-model="keyword" clearable placeholder="关键词" shape="round" @focus="$router.push('/search')">
                </van-search>
            </template>
            <template #right>
                <van-button size="mini" color="#e93b3d" text-color="#fff" @click="go(keyword)">搜索</van-button>
            </template>
        </AppHeader>

        <component :is="isShowSearchList?SearchList:SearchHistory" @search="go"></component>
    </div>
</template>

<script setup lang="ts">
    import {ref,computed} from "vue";
    import { useRouter } from "vue-router";

    import SearchHistory from "./SearchHistory/index.vue"
    import SearchList from "./SearchList/index.vue"

    let router = useRouter();
    let keyword = ref<string>("");

    let isShowSearchList = computed(()=>{
        return !!keyword.value
    })

    let go = (wd:string)=>{
        router.replace({path:"/list",query:{keyword:wd}})
    }
</script>

<style scoped>

</style>